<template>
  <img :src="bg" style="position: absolute;z-index: -1;width:100vw;height:100vh"/>
	<img :src="imgUrl" class="titleImg animate__animated animate__fadeIn" @animationend="showBtns = true" />
	<div class="btns" v-if="showBtns">
		<div class="btn animate__animated animate__fadeIn" @animationend="showMenu = true" @click="emits('startGame',true)">开 &nbsp;始</div>
		<div class="btn animate__animated animate__fadeIn">继 &nbsp;续</div>
		<div class="menu animate__animated animate__fadeIn" v-if="showMenu">
			<img :src="moreImg" />
			<img :src="settingImg" @click="showSetting=true"/>
		</div>
	</div>
  <Setting  v-model:show='showSetting'/>
</template>
<script setup>
import { ref } from "vue";
import Setting from './common/Setting.vue'
const bg='./img/bg.jpg'
const imgUrl = "./img/标题.jpg";
const settingImg = "./img/setting.png";
const moreImg = "./img/more.png";
const showBtns = ref(false);
const showMenu = ref(false);
const showSetting=ref(false);
const emits=defineEmits(['startGame'])
</script>
<style scoped>
.titleImg {
	transform: translateY(-12%);
	display: block;
	height: 100%;
	margin: 0 auto;
}
.btns {
	position: absolute;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	bottom: 15vh;
	width: 100%;
}
.btn {
	width: 20%;
	height: 10vh;
	border: 2px solid #f1b6b4;
	border-radius: 2px;
	color: transparent;
	-webkit-text-fill-color: #ffffff;
	-webkit-text-stroke: 1px #f1b6b4;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.5rem;
	box-shadow: 3px 2px 4px 0px #f1b6b4b8;
  user-select: none;
}
.menu {
	position: absolute;
	left: 1vw;
	top: 0;
	display: flex;
	flex-flow: column;
	align-items: center;
}
.menu img {
	width: 5vw;
	margin-bottom: 1vw;
}
</style>
